import { createBrowserRouter } from "react-router-dom";
import RouterParams from "../page/routerParams";
import GetRouterParams from "../page/getRouterParams";
import BasicConfig from "../page/basicConfig";
// import Comment from "../page/comment";

import Layout from "../layout";
import NotFound from "../page/404";
import { Suspense,lazy } from "react";
const Comment = lazy(() => import("../page/comment"));
const UseReducerPage = lazy(() => import("../page/useReducerPage"));
const UseMemoPage = lazy(() => import("../page/useMemoPage"));
const MemoPage = lazy(() => import("../page/memoPage"));
const UseCallbackPage = lazy(() => import("../page/useCallbackPage"));
const ForwardRefPage = lazy(() => import("../page/forwardRefPage"));
const ClassPage = lazy(() => import("../page/classPage"));
const ZustandPage = lazy(() => import("../page/zustandPage"));
const TsPage = lazy(() => import("../page/tsPage/index.ts"));
const router = createBrowserRouter([
    {
        path: "", name: "Layout", element: <Layout></Layout>, children: [
            { path: "/", name: "基础配置", element: <BasicConfig></BasicConfig>, },
            { path: "/routerParams", name: "路由跳转", element: <RouterParams></RouterParams> },
            { path: "/getRouterParams", name: "获取路由传参", element: <GetRouterParams></GetRouterParams>, isHidden: true },
            { path: "/comment", name: "评论案例(redux)", element: <Suspense fallback="加载中..."><Comment></Comment></Suspense>, },
            { path: "/useReducerPage", name: "useReducer练习", element: <Suspense fallback="加载中..."><UseReducerPage></UseReducerPage></Suspense>, },
            { path: "/useMemoPage", name: "useMemo练习", element: <Suspense fallback="加载中..."><UseMemoPage></UseMemoPage></Suspense>, },
            { path: "/memoPage", name: "React.memo练习", element: <Suspense fallback="加载中..."><MemoPage></MemoPage></Suspense>, },
            { path: "/useCallbackPage", name: "useCallback练习", element: <Suspense fallback="加载中..."><UseCallbackPage></UseCallbackPage></Suspense>, },
            { path: "/forwardRefPage", name: "forwardRef和useInperativeHandlle", element: <Suspense fallback="加载中..."><ForwardRefPage></ForwardRefPage></Suspense>, },
            { path: "/classPage", name: "class类组件写法(旧版)", element: <Suspense fallback="加载中..."><ClassPage></ClassPage></Suspense>, },
            { path: "/zustandPage", name: "zustand练习", element: <Suspense fallback="加载中..."><ZustandPage></ZustandPage></Suspense>, },
            { path: "/tsPage", name: "ts练习", element: <Suspense fallback="加载中..."><TsPage></TsPage></Suspense>, },
        ]
    },

    // {path: "/login2", name:"bb1", element: <Login></Login>},
    { path: "*", element: <NotFound></NotFound>, isHidden: true }
])

export default router;